<template>
  <div>
    <div class="center">
      <el-card>
        <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
        <div class="my_steps">
          <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="基础价格"></el-step>
            <el-step title="城市价格"></el-step>
            <el-step title="商圈价格"></el-step>
            <el-step title="商品详情"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>

          <el-tabs :stretch="true" tab-position="left" v-model="activeIndex" :before-leave="checkRules">
            <el-tab-pane name="0" label="基本信息">
              <el-form ref="goodsInfoForm" :model="goodsInfoForm" :rules="goodsInfoRules" :inline="true">
                <el-row>
                  <el-form-item label="商品名称:" prop="goodsTitle">
                    <el-input v-model="goodsInfoForm.goodsTitle" show-word-limit maxlength="15" style="width: 800px" placeholder="请输入商品名称"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="商品描述:" class="my_form_item_style">
                    <el-input v-model="goodsInfoForm.description" show-word-limit maxlength="60" style="width: 800px" placeholder="请输入商品描述"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="商品标签:" class="my_form_item_style">
                    <el-input v-model="goodsInfoForm.goodsTag" show-word-limit maxlength="8" style="width: 800px" placeholder="请输入商品标签"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="对应技能分类:" prop="skillType">
                    <el-select v-model="goodsInfoForm.skillType" style="width: 800px" placeholder="请选择">
                      <el-option label="A技能" value="A"></el-option>
                      <el-option label="B技能" value="B"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="选择单位:" prop="unit">
                    <el-select v-model="goodsInfoForm.unit" @change="changeUnitSelect" style="width: 800px" placeholder="请选择">
                      <el-option v-for="(unit, index) in unitList" :label="unit.unitName" :value="unit.unitCode" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="工艺类型:" class="my_form_item_style">
                    <el-select v-model="goodsInfoForm.selectedCraftCode" @change="changeCraftSelect" style="width: 400px" placeholder="请选择">
                      <el-option v-for="(craft, index) in craftTypeList" :label="craft.craftName" :value="craft.craftCode" :key="index">
                      </el-option>
                    </el-select>
                    <el-input style="width: 400px" type="text" v-model="goodsInfoForm.selectedCraftAlias" maxlength="15" show-word-limit placeholder="请输入工艺别名" />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="商品类型:" prop="goodsType">
                    <el-select v-model="goodsInfoForm.goodsType" @change="changeGoodsType" placeholder="请选择">
                      <el-option label="单项商品" :value="0" />
                      <el-option label="保洁体验卡" :value="1" />
                      <el-option label="家务师体验卡" :value="2" />
                      <el-option label="保洁周期卡" :value="3" />
                      <el-option label="家务师周期卡" :value="4" />
                    </el-select>
                    <div v-if="goodsInfoForm.goodsType === 0" style="display: inline-block; margin-left: 15px">
                      <el-checkbox v-model="goodsInfoForm.isSpecialGoods">专项商品</el-checkbox>
                    </div>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="支付类型:" prop="payType" v-if="
                      goodsInfoForm.goodsType === 3 ||
                        goodsInfoForm.goodsType === 4
                    ">
                    <el-radio v-model="goodsInfoForm.payType" label="0">全额支付</el-radio>
                    <el-radio v-model="goodsInfoForm.payType" label="1">月付</el-radio>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="确定月付次数:" prop="payMonthlyNum" v-if="goodsInfoForm.payType==1">
                    <el-select clearable v-model="goodsInfoForm.payMonthlyNum" placeholder="请选择月付次数" @change="paymonth">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <!-- <el-row> -->
                <div v-if="goodsInfoForm.payMonthlyNum!==''" class="el-form-item-te">
                  <el-form-item :label="`关联专项${index+1}:`" class="my_form_item_style" v-for="(item,index) in goodsInfoForm.goodsPayMonthSpecials" :key="index">
                    <div v-for="(item1,index1) in goodsInfoForm.goodsPayMonthSpecials[index].goodsPayMonth" :key="index1" style="margin-bottom:10px">
                      <el-select v-model="goodsInfoForm.goodsPayMonthSpecials[index].goodsPayMonth[index1].specialGoodsCode" placeholder="请选择" @change="associated(`${index+1}`)">
                        <el-option v-for="item in specialGoodsOptions" :key="item.goodsCode" :label="item.goodsTitle" :value="item.goodsCode">
                        </el-option>
                      </el-select>
                      <el-button icon="el-icon-plus" style="background-color:#fd804c;color: #fff;" v-if="index1 === 0" @click="addgoodsregion(index)"></el-button>
                      <el-button icon="el-icon-minus" style="background-color:#fd804c;color: #fff;" v-if="index1 !== 0" @click="deletgoodsregion(index)"></el-button>
                    </div>
                  </el-form-item>
                </div>
                <!-- </el-row> -->
                <el-row>
                  <el-form-item label="是否开启月付循环:" prop="payMonthlyCycle" v-if="goodsInfoForm.payType == 1">
                    <el-radio v-model="goodsInfoForm.payMonthlyCycle" label="1">是</el-radio>
                    <el-radio v-model="goodsInfoForm.payMonthlyCycle" label="0">否</el-radio>
                  </el-form-item>
                </el-row>
                <!-- <el-row>
                  <el-form-item label="专项可用配置:" prop="special" v-if="goodsInfoForm.goodsType === 3 || goodsInfoForm.goodsType === 4">
                    <el-radio v-model="goodsInfoForm.special" label="1">按照服务规格次数百分比</el-radio>
                    <el-radio v-model="goodsInfoForm.special" label="2">按照服务有效百分比</el-radio>
                    <el-input v-model="goodsInfoForm.specialfrequency" placeholder="请输入百分比" style="width: 120px;"></el-input>
                    <span>%</span>
                  </el-form-item>
                </el-row> -->
                <el-row v-if="goodsInfoForm.goodsType !== 0">
                  <el-form-item label="服务期限:" prop="serviceExpiryDate">
                    <el-input style="width: 120px" v-model.number="goodsInfoForm.serviceExpiryDate" autocomplete="off"></el-input>
                    &nbsp;&nbsp;天

                    <!-- <el-radio-group style="margin-left: 50px" v-model="goodsInfoForm.serviceExpiryType">
                      <el-radio :label="0">购买当日算起</el-radio>
                      <el-radio :label="1">购买次日算起</el-radio>
                    </el-radio-group> -->
                  </el-form-item>
                </el-row>
                <el-row class="checkuserAppointmentDateDataRow" v-if="
                    goodsInfoForm.goodsType === 3 ||
                      goodsInfoForm.goodsType === 4
                  ">
                  <el-form-item label="用户可预约日期:">
                    <el-checkbox v-model="fixedDateFlag">固定日期</el-checkbox>
                  </el-form-item>
                  <el-table :data="userAppointmentDateData" border class="checkWeekTable">
                    <el-table-column v-for="(item, index) in userAppointmentDateData[0]
                        .valueList" :key="index" :label="weekOptions[item.week]" width="60">
                      <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.valueList[index].checked"></el-checkbox>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-row>
                <el-row>
                  <el-form-item label="服务分类:" prop="classifyCode">
                    <el-select v-model="goodsInfoForm.classifyCode" clearable placeholder="请选择" @clear="classifyFlag = false" @change="classifyFlag = true">
                      <el-option v-for="(classify, index) in classifyTree" :key="index" :label="classify.classifyName" :value="classify.classifyCode"></el-option>
                    </el-select>
                    <el-select v-show="classifyFlag" v-model="goodsInfoForm.subClassifyCode" placeholder="请选择">
                      <el-option v-for="(classify, index) in subClassifyList" :key="index" :label="classify.classifyName" :value="classify.classifyCode"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="是否可售:" class="my_form_item_style">
                    <el-switch v-model="goodsInfoForm.isCanSell"></el-switch>
                  </el-form-item>
                </el-row>
                <el-row v-if="!goodsInfoForm.isCanSell">
                  <el-form-item label="不可售说明:" prop="notSellExplain">
                    <el-input v-model="goodsInfoForm.notSellExplain" maxlength="4" show-word-limit />
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="商品上下架:" class="my_form_item_style">
                    <el-switch v-model="goodsInfoForm.isPutAway"></el-switch>
                    <span style="font-size:12px;margin-left:8px;color:#F56C6C;">提示：创建商品后，需在员工管理中的技能库里配置对应的技能，
                      并且对应商圈的员工需要选择并配置该项技能，才可以编辑上架！</span>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="区域分组:" prop="areaCodes">
                    <el-checkbox-group v-model="goodsInfoForm.areaCodes">
                      <el-checkbox v-for="(area, index) in subServiceAreaList" :key="index" :label="area.areaCode" border>
                        {{ area.areaName }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="可售时段" prop="sellTimeIntervals">
                    <el-time-select v-model="sellTimeInterval" format="HH:mm" @change="chooseTimeInterval($event)" placeholder="选择可售时间点" :picker-options="{
                        start: '08:00',
                        step: '00:30',
                        end: '21:00'
                      }">
                    </el-time-select>

                    <div style="position: relative;right: 10px">
                      <el-tag v-for="(tag, i) in goodsInfoForm.sellTimeIntervals" :key="i" closable type="success" @close="tagClose(tag)">
                        {{ tag }}
                      </el-tag>
                    </div>
                  </el-form-item>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="1" label="基础价格" class="basicprice">
              <el-row>
                <el-form ref="goodsCraftForm" :model="goodsCraftForm" :inline="true">
                  <el-table border :data="goodsCraftForm.craftList" :span-method="
                      param => objectSpanMethod(param, goodsCraftForm.craftList)
                    " style="width: 100%">
                    <el-table-column v-if="false" prop="skuId" label="skuId">
                    </el-table-column>
                    <el-table-column prop="craftName" label="工艺类型" width="100px">
                    </el-table-column>
                    <el-table-column v-if="false" prop="craftCode" label="工艺code">
                    </el-table-column>
                    <el-table-column :label="'总数量(' + goodsInfoForm.unitName + ')'" width="120px">
                      <template slot-scope="scope">
                        <template v-if="goodsInfoForm.unit !== '1'">
                          <el-form-item :prop="`craftList.${scope.$index}.num`" :rules="goodsCraftRules.num">
                            <el-input v-model="scope.row.num"></el-input>
                          </el-form-item>
                        </template>
                        <span v-else>{{ scope.row.num }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="单次时长(分钟)" width="140px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.duration`" :rules="goodsCraftRules.duration">
                          <el-input v-model="scope.row.duration" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="单次价格(元)" width="120px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.basicPrice`" :rules="goodsCraftRules.basicPrice">
                          <el-input v-model.number="scope.row.basicPrice" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="实际售价(元)" width="120px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.actualSellPrice`" :rules="goodsCraftRules.actualSellPrice">
                          <el-input v-model.number="scope.row.actualSellPrice" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="月付每月售价(元)" width="140px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.payMonthlyPrice`" :rules="goodsCraftRules.actualSellPrice">
                          <el-input v-model.number="scope.row.payMonthlyPrice" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column label="划线价(元)" width="100px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.actualSellPrice`" :rules="goodsCraftRules.actualSellPrice">
                          <el-input v-model.number="scope.row.actualSellPrice" />
                        </el-form-item>
                      </template>
                    </el-table-column> -->
                    <el-table-column label="材质" width="100px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.texture`">
                          <el-input v-model="scope.row.texture" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="skuName" label="规格名称" width="280px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.skuName`" :rules="goodsCraftRules.skuName">
                          <el-input v-model="scope.row.skuName" maxlength="10" show-word-limit />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="工艺描述" width="280px">
                      <template slot-scope="scope">
                        <el-form-item :prop="`craftList.${scope.$index}.description`">
                          <el-input v-model="scope.row.description" maxlength="15" show-word-limit />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                      <template slot-scope="scope">
                        <el-button v-if="scope.$index === 0" @click="addCraftRow(true)" style="color: #fc9e76;" type="text" size="small">新增</el-button>
                        <el-button v-if="scope.$index !== 0" @click.native.prevent="
                            deleteCraftRow(
                              scope.$index,
                              goodsCraftForm.craftList
                            )
                          " style="color: #fc9e76;" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </el-row>
            </el-tab-pane>
            <el-tab-pane name="2" label="城市价格">
              <el-row>
                <el-button @click="addGoodsCityPriceHandle()">新增城市价格</el-button>
              </el-row>
              <el-row style="margin-top: 20px" v-if="goodsCityPriceForm.cityPriceList.length > 0">
                <el-form ref="goodsCityPriceForm" :model="goodsCityPriceForm" :inline="true">
                  <el-table border :data="goodsCityPriceForm.cityPriceList" :span-method="
                      param =>
                        objectSpanMethod(
                          param,
                          goodsCityPriceForm.cityPriceList
                        )
                    " style="width: 100%">
                    <el-table-column v-if="false" prop="skuId" label="skuId">
                    </el-table-column>
                    <el-table-column prop="cityName" label="城市" fixed="left" width="150">
                    </el-table-column>
                    <el-table-column align="center" :label="goodsInfoForm.craftName">
                      <el-table-column prop="craftCode" label="工艺编号" v-if="false">
                      </el-table-column>
                      <el-table-column prop="cityCode" label="归属城市编码" v-if="false">
                      </el-table-column>
                      <el-table-column prop="num" label="数量(次)">
                      </el-table-column>
                      <el-table-column prop="duration" label="时长(分钟)" width="120">
                      </el-table-column>
                      <el-table-column prop="texture" label="材质">
                      </el-table-column>
                      <el-table-column prop="skuName" label="规格名称">
                      </el-table-column>
                      <el-table-column label="单价(元)" width="140">
                        <template slot-scope="scope">
                          <el-form-item :prop="`cityPriceList.${scope.$index}.cityPrice`" :rules="goodsCityPriceRules.cityPrice">
                            <el-input type="number" v-model="scope.row.cityPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="实际售价(元)" width="120">
                        <template slot-scope="scope">
                          <el-form-item :prop="
                              `cityPriceList.${scope.$index}.actualSellPrice`
                            " :rules="goodsCityPriceRules.actualSellPrice">
                            <el-input type="number" v-model="scope.row.actualSellPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="月付每月售价(元)" width="140px">
                        <template slot-scope="scope">
                          <el-form-item :prop="
                              `cityPriceList.${scope.$index}.payMonthlyPrice`
                            " :rules="goodsCityPriceRules.payMonthlyPrice">
                            <el-input type="number" v-model="scope.row.payMonthlyPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="上下架控制" width="120">
                        <template slot-scope="scope">
                          <el-form-item :prop="`cityPriceList.${scope.$index}.isPutAway`">
                            <el-switch v-model="scope.row.isPutAway" active-color="#fb8053" inactive-color="#dcdfe6">
                            </el-switch>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-link type="danger" @click="
                              deleteCityPriceRow(
                                scope.$index,
                                goodsCityPriceForm.cityPriceList
                              )
                            ">删除</el-link>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </el-form>
              </el-row>
            </el-tab-pane>
            <el-tab-pane name="3" label="商圈价格">
              <el-row>
                <el-button @click="addGoodsCityAreaPriceHandle()">新增商圈价格</el-button>
              </el-row>
              <el-row style="margin-top: 20px" v-if="cityAreas.length > 0">
                <el-form ref="goodsCityAreaPriceForm" :model="goodsCityAreaPriceForm" :inline="true">
                  <el-table border :data="goodsCityAreaPriceForm.cityAreaPriceList" :span-method="
                      param =>
                        objectSpanMethod(
                          param,
                          goodsCityAreaPriceForm.cityAreaPriceList,
                          1
                        )
                    " style="width: 100%">
                    <el-table-column v-if="false" prop="skuId" label="skuId">
                    </el-table-column>
                    <el-table-column prop="cityName" label="城市" fixed="left" width="150">
                    </el-table-column>
                    <el-table-column align="center" :label="goodsInfoForm.craftName">
                      <el-table-column prop="craftCode" label="工艺编号" v-if="false">
                      </el-table-column>
                      <el-table-column prop="cityCode" label="归属城市编码" v-if="false">
                      </el-table-column>
                      <el-table-column prop="areaCode" label="商圈编码" v-if="false">
                      </el-table-column>
                      <el-table-column prop="areaName" label="所属商圈">
                      </el-table-column>
                      <el-table-column prop="num" label="数量(次)">
                      </el-table-column>
                      <el-table-column prop="duration" label="时长(分钟)" width="100">
                      </el-table-column>
                      <el-table-column prop="texture" label="材质">
                      </el-table-column>
                      <el-table-column prop="skuName" label="规格名称">
                      </el-table-column>
                      <el-table-column label="单价(元)" width="120">
                        <template slot-scope="scope">
                          <el-form-item :prop="
                              `cityAreaPriceList.${scope.$index}.cityPrice`
                            " :rules="goodsCityAreaPriceRules.cityPrice">
                            <el-input v-model="scope.row.cityPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="实际售价(元)" width="130">
                        <template slot-scope="scope">
                          <el-form-item :prop="
                              `cityAreaPriceList.${scope.$index}.payMonthlyPrice`
                            " :rules="goodsCityAreaPriceRules.payMonthlyPrice">
                            <el-input v-model="scope.row.payMonthlyPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="月付每月售价(元)" width="140px">
                        <template slot-scope="scope">
                          <el-form-item :prop="
                              `cityAreaPriceList.${scope.$index}.payMonthlyPrice`
                            " :rules="goodsCityAreaPriceRules.payMonthlyPrice">
                            <el-input type="number" v-model="scope.row.payMonthlyPrice"></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="上下架控制" width="100px">
                        <template slot-scope="scope">
                          <el-form-item :prop="`cityPriceList.${scope.$index}.isPutAway`">
                            <el-switch v-model="scope.row.isPutAway" active-color="#fb8053" inactive-color="#dcdfe6">
                            </el-switch>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-link type="danger" @click="
                              deleteCityAreaPriceRow(
                                scope.$index,
                                goodsCityAreaPriceForm.cityAreaPriceList
                              )
                            ">删除</el-link>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </el-form>
              </el-row>
            </el-tab-pane>
            <el-tab-pane name="4" label="商品详情">
              <el-card>
                <div class="tip">
                  外部应用图
                </div>
                <el-upload action="https://api.xstarlife.com/systemapp/upload/singleFileUpload" list-type="picture-card" :limit="1" :headers="{ uploadScene: 'avatar' }" :on-success="iconImgUpSuccess" :on-remove="iconImgRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-card>
              <el-card style="margin-top: 10px">
                <div class="tip">
                  规格小图
                </div>
                <el-upload action="https://api.xstarlife.com/systemapp/upload/singleFileUpload" list-type="picture-card" :limit="1" :headers="{ uploadScene: 'avatar' }" :on-success="minImgUpSuccess" :on-remove="minImgRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-card>
              <el-card style="margin-top: 10px">
                <div class="tip">
                  头图
                </div>
                <el-upload action="https://api.xstarlife.com/systemapp/upload/singleFileUpload" list-type="picture-card" :headers="{ uploadScene: 'avatar' }" :on-success="headImgUpSuccess" :on-remove="headImgRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-card>
              <el-card style="margin-top: 10px">
                <div class="tip">
                  详情
                </div>
                <el-upload action="https://api.xstarlife.com/systemapp/upload/singleFileUpload" list-type="picture-card" :headers="{ uploadScene: 'avatar' }" :on-success="detailImgUpSuccess" :on-remove="detailImgRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-card>
            </el-tab-pane>
          </el-tabs>
          <div class="next_button">
            <el-button v-show="activeIndex !== '4'" style="margin-top: 20px;" @click="next">下一步</el-button>
            <el-button v-show="activeIndex === '4'" style="margin-top: 20px;" :loading="isSaveLoading" @click="submitGoodsInfo">完成</el-button>
          </div>
        </div>
      </el-card>

      <add-goods-city-price v-if="addGoodsCityPriceVisible" ref="addGoodsCityPrice" :craftCode="goodsInfoForm.selectedCraftCode" :craftName="goodsInfoForm.craftName" :cityList="cityList" @func="checkedCityCodes"></add-goods-city-price>

      <add-goods-city-area-price v-if="addGoodsCityAreaPriceVisible" ref="addGoodsCityAreaPrice" :cityCodes="cityCodes" :craftName="goodsInfoForm.craftName" :cityList="cityList" @func="checkedCityAreas"></add-goods-city-area-price>
    </div>
  </div>
</template>

<script>
import AddGoodsCityPrice from "./add-goods-city-price";
import AddGoodsCityAreaPrice from "./add-goods-city-area-price";
import moment from "moment";

export default {
  components: { AddGoodsCityPrice, AddGoodsCityAreaPrice },
  inject: ["reload"],
  data () {
    return {
      isSave: false,
      isSaveLoading: false,
      addGoodsCityPriceVisible: false,
      addGoodsCityAreaPriceVisible: false,
      classifyFlag: false,
      classifyTree: "",
      unitList: [], //商品单位列表
      subServiceAreaList: [], // 商品区域分组列表
      subClassifyList: [],
      activeIndex: "0",
      craftTypeList: [],
      INdexArr: [],
      cityCodes: [],
      cityPriceAll: "", //城市统一价
      cityAreaPriceAll: [], //城市商圈统一加
      cityAreas: [],
      cityList: [],
      options: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
        { value: '4', label: '4' },
        { value: '5', label: '5' },
        { value: '6', label: '6' },
        { value: '7', label: '7' },
        { value: '8', label: '8' },
        { value: '9', label: '9' },
        { value: '10', label: '10' },
        { value: '11', label: '11' },
        { value: '12', label: '12' },
      ],
      sellTimeInterval: "",
      isPutAwayCity: true,
      payMonthlyOrdinal: [],
      GoodsOptions: [{
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }, {
        value: '6',
        label: '6'
      },],
      specialGoodsOptions: [],
      state: [0],
      goodsPayMonthSpecials: [],
      goodsInfoForm: {
        payType: "0",
        payMonthlyCycle: "0",
        payMonthlyNum: "",
        specialfrequency: "",
        goodsTitle: "",
        goodsId: "",
        description: "",
        goodsTag: "",
        goodsType: 0,
        isSpecialGoods: false,
        goodsPayMonthSpecials: [
          {
            goodsPayMonth: [
              {
                specialGoodsCode: '',
                payMonthlyOrdinal: ''
              }
            ]
          }
        ],
        serviceExpiryDate: "",
        serviceExpiryType: 1,
        introduce: "",
        unit: "",
        unitName: "",
        classifyCode: "",
        subClassifyCode: "",
        skillType: "",
        craftName: "基础保洁",
        selectedCraftCode: "JCBJ",
        selectedCraftAlias: "",
        isCanSell: true,
        notSellExplain: "",
        isPutAway: false,
        areaCodes: [],

        sellTimeIntervals: []
      },
      goodsInfoRules: {
        goodsTitle: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        skillType: [
          { required: true, message: "选择技能类别", trigger: "blur" }
        ],
        selectedCraftAlias: [
          { required: true, message: "请输入工艺别名", trigger: "blur" }
        ],
        notSellExplain: [
          { required: true, message: "请输入不可售原因", trigger: "blur" }
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "blur" }],
        classifyCode: [
          {
            required: true,
            validator: (rules, value, callback) => {
              let { subClassifyCode } = this.goodsInfoForm;
              if (!value || !subClassifyCode) {
                return callback(new Error("请选择分组"));
              }
              return callback();
            },
            trigger: "blur"
          }
        ],
        goodsType: [
          { required: true, message: "请选择商品类型", trigger: "blur" }
        ],
        payType: [
          { required: true, message: "请选择支付类型", trigger: "blur" }
        ],
        payMonthlyNum: [
          { required: true, message: "请填写月付次数", trigger: "blur" }
        ],
        special: [
          { required: true, message: "请选择专项可用配置", trigger: "blur" }
        ],
        serviceExpiryDate: [
          { required: true, message: "请输入服务有效期", trigger: "blur" }
        ],
        areaCodes: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个区域",
            trigger: "change"
          }
        ],
        sellTimeIntervals: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个可售时段",
            trigger: "change"
          }
        ]
      },
      goodsCraftForm: {
        craftList: []
      },
      specifications: {
        craftList: []
      },
      goodsCraftRules: {
        num: [{ required: true, message: "请填写单位", trigger: "change" }],
        duration: [
          { required: true, message: "请填写时长", trigger: "change" }
        ],
        basicPrice: [
          {
            type: "number",
            required: true,
            message: "请填写价格",
            trigger: "change"
          }
        ],
        actualSellPrice: [
          {
            type: "number",
            required: true,
            message: "请填写实际价格",
            trigger: "change"
          }
        ],
        payMonthlyPrice: [
          { required: true, message: "请填写月付每月价格", trigger: "change" }
        ],
        texture: [{ required: true, message: "请填写材质", trigger: "change" }],
        skuName: [
          { required: true, message: "请填写规格名称", trigger: "change" }
        ]
      },
      goodsCityPriceForm: {
        cityPriceList: []
      },
      goodsCityPriceRules: {
        cityPrice: [
          { required: true, message: "请填写价格", trigger: "change" }
        ],
        actualSellPrice: [
          { required: true, message: "请填写实际价格", trigger: "change" }
        ],
        payMonthlyPrice: [
          { required: true, message: "请填写月付每月价格", trigger: "change" }
        ]
      },
      goodsCityAreaPriceForm: {
        cityAreaPriceList: []
      },
      goodsCityAreaPriceRules: {
        cityPrice: [
          { required: true, message: "请填写价格", trigger: "change" }
        ],
        actualSellPrice: [
          { required: true, message: "请填写实际价格", trigger: "change" }
        ],
        payMonthlyPrice: [
          { required: true, message: "请填写月付每月价格", trigger: "change" }
        ]
      },
      goodsAttachForm: {
        iconImgList: [],
        headImgList: [],
        detailImgList: [],
        minImgList: []
      },
      weekOptions: {
        "0": "周日",
        "1": "周一",
        "2": "周二",
        "3": "周三",
        "4": "周四",
        "5": "周五",
        "6": "周六"
      },
      userAppointmentDateData: [
        // 用户可预约日期
        {
          row: 1,
          valueList: [
            {
              week: "0",
              checked: false
            },
            {
              week: "1",
              checked: false
            },
            {
              week: "2",
              checked: false
            },
            {
              week: "3",
              checked: false
            },
            {
              week: "4",
              checked: false
            },
            {
              week: "5",
              checked: false
            },
            {
              week: "6",
              checked: false
            }
          ]
        }
      ],
      fixedDateFlag: false
    };
  },
  methods: {
    //月付次数
    paymonth () {
      let a = this.goodsInfoForm.payMonthlyNum
      this.state.push(a)
      let fist = this.state[0]
      let last = this.state[this.state.length - 1]
      if (fist != last) {
        this.goodsInfoForm.goodsPayMonthSpecials.splice(1);
      }
      if (a > 0 && a < 13) {
        for (let index = 0; index < a - 1; index++) {
          this.goodsInfoForm.goodsPayMonthSpecials.push({
            goodsPayMonth: [{
              specialGoodsCode: '',
              payMonthlyOrdinal: Number(index++)
            }]
          });
        }
        console.log(a)
      } else {
        this.goodsInfoForm.goodsPayMonthSpecials.splice(1);
        this.$message.error('请选择确定月付次数')
      }
    },
    associated (index1) {
      console.log(index1, '11111')
    },
    //添加关联专项
    addgoodsregion (index1) {
      this.goodsInfoForm.goodsPayMonthSpecials[index1].goodsPayMonth.push({
        specialGoodsCode: '',
        payMonthlyOrdinal: Number(index1 + 1)
      });
    },
    //减少关联专项
    deletgoodsregion (index1) {
      this.goodsInfoForm.goodsPayMonthSpecials[index1].goodsPayMonth.splice(index1, 1)
    },
    iconImgUpSuccess ({ data }) {
      this.goodsAttachForm.iconImgList.push({
        attachPosition: 1,
        attachType: 1,
        attachUrl: data
      });
    },
    iconImgRemove () {
      this.goodsAttachForm.iconImgList = [];
    },
    headImgUpSuccess ({ data }) {
      this.goodsAttachForm.headImgList.push({
        attachPosition: 2,
        attachType: 1,
        attachUrl: data
      });
    },
    headImgRemove (file, fileList) {
      let headImgList = [];
      fileList.forEach(f => {
        let imgUrl = f.response.data;
        headImgList.push({
          attachPosition: 2,
          attachType: 1,
          attachUrl: imgUrl
        });
      });
      this.goodsAttachForm.headImgList = headImgList;
    },
    detailImgUpSuccess ({ data }) {
      this.goodsAttachForm.detailImgList.push({
        attachPosition: 3,
        attachType: 1,
        attachUrl: data
      });
    },
    detailImgRemove (fileList) {
      let detailImgList = [];
      fileList.forEach(f => {
        let imgUrl = f.response.data;
        detailImgList.push({
          attachPosition: 3,
          attachType: 1,
          attachUrl: imgUrl
        });
      });
      this.goodsAttachForm.detailImgList = detailImgList;
    },
    minImgUpSuccess ({ data }) {
      this.goodsAttachForm.minImgList.push({
        attachPosition: 4,
        attachType: 1,
        attachUrl: data
      });
    },
    minImgRemove (fileList) {
      let minImgList = [];
      fileList.forEach(f => {
        let imgUrl = f.response.data;
        minImgList.push({
          attachPosition: 4,
          attachType: 1,
          attachUrl: imgUrl
        });
      });
      this.goodsAttachForm.minImgList = minImgList;
    },
    objectSpanMethod (
      { row, column, rowIndex, columnIndex },
      tableData,
      cellIndex
    ) {
      if (columnIndex === 0 || cellIndex === columnIndex) {
        const cellValue = row[column.property];
        if (cellValue) {
          // 上一条数据
          const prevRow = tableData[rowIndex - 1];
          // 下一条数据
          let nextRow = tableData[rowIndex + 1];
          // 当上一条数据等于下一条数据
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 };
          } else {
            let rowspan = 1;
            while (nextRow && nextRow[column.property] === cellValue) {
              rowspan++;
              nextRow = tableData[rowspan + rowIndex];
            }
            if (rowspan > 1) {
              return { rowspan, colspan: 1 };
            }
          }
        }
      }
    },
    next () {
      console.log(this.goodsInfoForm, 'goodsInfoForm')
      if ("0" === this.activeIndex) {
        this.$refs["goodsInfoForm"].validate(valid => {
          if (valid) {
            this.nextActive();
          } else {
            this.$message({
              showClose: true,
              message: "请先填写必填字段",
              type: "error"
            });
            return false;
          }
        });
      } else if ("1" === this.activeIndex) {
        this.$refs["goodsCraftForm"].validate(valid => {
          if (valid) {
            this.nextActive();
          } else {
            this.$message({
              showClose: true,
              message: "请先填写必填字段",
              type: "error"
            });
            return false;
          }
        });
      } else if ("2" === this.activeIndex) {
        if (!this.$refs["goodsCityPriceForm"]) {
          this.nextActive();
          return;
        }
        this.$refs["goodsCityPriceForm"].validate(valid => {
          if (valid) {
            this.nextActive();
          } else {
            this.$message({
              showClose: true,
              message: "请先填写必填字段",
              type: "error"
            });
            return false;
          }
        });
      } else if ("3" === this.activeIndex) {
        if (!this.$refs["goodsCityAreaPriceForm"]) {
          this.nextActive();
          return;
        }
        this.$refs["goodsCityAreaPriceForm"].validate(valid => {
          if (valid) {
            this.nextActive();
          } else {
            this.$message({
              showClose: true,
              message: "请先填写必填字段",
              type: "error"
            });
            return false;
          }
        });
      }
    },
    nextActive () {
      let index = this.activeIndex - 0 + 1;
      if (index > 6) {
        this.activeIndex = "0";
        return;
      }
      this.activeIndex = index + "";
    },
    addCraftRow (isButtonAdd) {
      if (isButtonAdd && this.goodsInfoForm.unit === "1") {
        this.$message.warning("单位为【平米】时，规格配置只能有一条");
        return;
      }
      let craftCode = this.goodsInfoForm.selectedCraftCode;
      let { craftName } = this.craftTypeList.find(
        craft => craft.craftCode === craftCode
      );
      this.craftName = craftName;
      this.goodsCraftForm.craftList.push({
        skuId: this.getSkuId(),
        skuName: "",
        craftCode: craftCode,
        craftName: craftName,
        num: this.goodsInfoForm.unit === "1" ? 1 : "",
        duration: "",
        actualSellPrice: "",
        payMonthlyPrice: "",
        basicPrice: "",
        texture: "",
        spec: "",
        description: ""
      });
    },
    deleteCraftRow (index, rows) {
      rows.splice(index, 1);
    },
    deleteCityPriceRow (index, rows) {
      let { cityCode } = rows.splice(index, 1)[0];
      let i = this.cityCodes.indexOf(cityCode);
      if (i > -1) {
        this.cityCodes.splice(i, 1);
      }
      this.$refs.addGoodsCityPrice.removeCityCode(cityCode);
    },
    deleteCityAreaPriceRow (index, rows) {
      let { cityCode, areaCode } = rows.splice(index, 1)[0];
      this.$refs.addGoodsCityAreaPrice.removeAreaCode(cityCode, areaCode);
    },
    addGoodsCityPriceHandle () {
      this.addGoodsCityPriceVisible = true;
      this.$nextTick(() => {
        this.$refs.addGoodsCityPrice.init();
      });
    },
    addGoodsCityAreaPriceHandle () {
      this.addGoodsCityAreaPriceVisible = true;
      this.$nextTick(() => {
        this.$refs.addGoodsCityAreaPrice.init();
      });
    },
    getSkuId () {
      return Number(
        Math.random()
          .toString()
          .substr(3, length) + Date.now()
      );
    },
    checkRules (activeName, oldActiveName) {
      let activeFlag = true;
      if ("0" === oldActiveName && Number(activeName) > Number(oldActiveName)) {
        this.$refs["goodsInfoForm"].validate(valid => {
          if (!valid) activeFlag = false;
        });
        if (!activeFlag) {
          this.$message.error("请先填写必填字段");
        }
        return activeFlag;
      } else if (
        "1" === oldActiveName &&
        Number(activeName) > Number(oldActiveName)
      ) {
        this.$refs["goodsCraftForm"].validate(valid => {
          if (!valid) activeFlag = false;
        });
        if (!activeFlag) {
          this.$message.error("请先填写必填字段");
        }
        return activeFlag;
      } else if (
        "2" === oldActiveName &&
        Number(activeName) > Number(oldActiveName)
      ) {
        if (!this.$refs["goodsCityPriceForm"]) return activeFlag;
        this.$refs["goodsCityPriceForm"].validate(valid => {
          if (!valid) activeFlag = false;
        });
        if (!activeFlag) {
          this.$message.error("请先填写必填字段");
        }
        return activeFlag;
      } else if (
        "3" === oldActiveName &&
        Number(activeName) > Number(oldActiveName)
      ) {
        if (!this.$refs["goodsCityAreaPriceForm"]) return activeFlag;
        this.$refs["goodsCityAreaPriceForm"].validate(valid => {
          if (!valid) activeFlag = false;
        });
        if (!activeFlag) {
          this.$message.error("请先填写必填字段");
        }
        return activeFlag;
      }
    },
    checkedCityCodes (cityCodes, cityPriceAll) {
      this.cityCodes = cityCodes;
      this.cityPriceAll = cityPriceAll;
    },
    checkedCityAreas (cityAreas, cityAreaPriceAll) {
      this.cityAreaPriceAll = cityAreaPriceAll;
      this.cityAreas = cityAreas;
    },
    changeCraftSelect (val) {
      let { craftName } = this.craftTypeList.find(c => c.craftCode === val);
      this.goodsInfoForm.craftName = craftName;
    },
    changeUnitSelect (val) {
      let { unitName } = this.unitList.find(u => u.unitCode === val);
      this.goodsInfoForm.unitName = unitName;
    },
    tagClose (tag) {
      let tagList = this.goodsInfoForm.sellTimeIntervals;
      tagList.splice(tagList.indexOf(tag), 1);
    },
    chooseTimeInterval (t) {
      if (t !== null) {
        if (this.goodsInfoForm.sellTimeIntervals.indexOf(t) === -1) {
          this.goodsInfoForm.sellTimeIntervals.push(t);
        }
      }
      this.sellTimeInterval = "";
    },
    async getCraftTypeList () {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getCraftList`
      );
      this.craftTypeList = data;
    },
    async getServiceClassify () {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceClassify/getServiceClassifyList`
      );
      this.classifyTree = data;
    },
    async getUnitList () {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getUnitList`
      );
      this.unitList = data;
    },
    async getSubServiceAreaList () {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceAreaInfo/getSubServiceAreaList`
      );
      this.subServiceAreaList = data;
    },
    async getCityList () {
      const { data } = await this.$http.get(
        "hsssystemadmin/v1/businessManagement/getCityAreaList"
      );
      let cityList = [];
      data.forEach(d => {
        cityList.push({ cityCode: d.cityCode, cityName: d.cityName });
      });
      this.cityList = cityList;
    },
    async getSpecialGoodsList () {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getSpecialGoodsList`
      );
      this.specialGoodsOptions = data;
    },
    async submitGoodsInfo () {
      if (this.isSave) {
        return false;
      }
      let {
        iconImgList,
        headImgList,
        detailImgList,
        minImgList
      } = this.goodsAttachForm;
      if (
        iconImgList.length === 0 ||
        headImgList.length === 0 ||
        detailImgList.length === 0 ||
        minImgList.length === 0
      ) {
        this.$message.error("小图、头图、详情图、外部应用图不能为空");
        return;
      }
      let attach = [
        ...iconImgList,
        ...headImgList,
        ...detailImgList,
        ...minImgList
      ];
      this.goodsInfoForm.goodsPayMonthSpecials.forEach(e => {
        this.goodsPayMonthSpecials = e.goodsPayMonth
      })
      let goodsBaseInfo = {
        payType: this.goodsInfoForm.payType,
        payMonthlyCycle: this.goodsInfoForm.payMonthlyCycle,
        payMonthlyNum: this.goodsInfoForm.payMonthlyNum,
        specialfrequency: this.goodsInfoForm.specialfrequency,
        goodsTitle: this.goodsInfoForm.goodsTitle,
        goodsId: this.goodsInfoForm.goodsId,
        description: this.goodsInfoForm.description,
        goodsTag: this.goodsInfoForm.goodsTag,
        goodsType: this.goodsInfoForm.goodsType,
        isSpecialGoods: this.goodsInfoForm.isSpecialGoods,
        goodsPayMonthSpecials: this.goodsPayMonthSpecials,
        serviceExpiryDate: this.goodsInfoForm.serviceExpiryDate,
        serviceExpiryType: this.goodsInfoForm.serviceExpiryType,
        introduce: this.goodsInfoForm.introduce,
        unit: this.goodsInfoForm.unit,
        unitName: this.goodsInfoForm.unitName,
        classifyCode: this.goodsInfoForm.classifyCode,
        subClassifyCode: this.goodsInfoForm.subClassifyCode,
        skillType: this.goodsInfoForm.skillType,
        craftName: this.goodsInfoForm.craftName,
        selectedCraftCode: this.goodsInfoForm.selectedCraftCode,
        selectedCraftAlias: this.goodsInfoForm.selectedCraftAlias,
        isCanSell: this.goodsInfoForm.isCanSell,
        notSellExplain: this.goodsInfoForm.notSellExplain,
        isPutAway: this.goodsInfoForm.isPutAway,
        areaCodes: this.goodsInfoForm.areaCodes,
        sellTimeIntervals: this.goodsInfoForm.sellTimeIntervals
      };
      console.log(goodsBaseInfo, '1232131')
      let sellDates = this.userAppointmentDateData[0].valueList.map(item => {
        if (item.checked) {
          if (item.week == "0") {
            return 7;
          } else {
            return Number(item.week);
          }
        } else {
          return "";
        }
      });
      sellDates = sellDates.filter(item => item);
      let goods = {
        goodsBaseInfo,
        goodsCrafts: this.goodsCraftForm.craftList,
        goodsCityPrices: this.goodsCityPriceForm.cityPriceList,
        goodsBusinessAreaPrices: this.goodsCityAreaPriceForm.cityAreaPriceList,
        goodsAttachs: attach,
        sellDates: this.fixedDateFlag ? sellDates : []
      };
      this.isSaveLoading = true;
      this.isSave = true;
      try {
        const { success } = await this.$http.post(
          "hssgoodsadmin/serviceGoodsInfo/saveGoodsInfo",
          goods
        );
        if (success === 1) {
          this.$message.success("添加商品成功!");
          setTimeout(() => {
            this.isSave = false;
          }, 2000);
          this.isSaveLoading = false;
          await this.$router.replace("/goods");
          this.reload();
        } else {
          setTimeout(() => {
            this.isSave = false;
          }, 2000);
          this.isSaveLoading = false;
          this.$message.error("添加商品失败!");
        }
      } catch (err) {
        setTimeout(() => {
          this.isSave = false;
        }, 2000);
        this.$message.error("系统繁忙，请稍后重试");
        this.isSaveLoading = false;
      }
    },
    changeGoodsType (value) {
      this.fixedDateFlag = false;
      this.userAppointmentDateData = [
        // 用户可预约日期
        {
          row: 1,
          valueList: [
            {
              week: "0",
              checked: false
            },
            {
              week: "1",
              checked: false
            },
            {
              week: "2",
              checked: false
            },
            {
              week: "3",
              checked: false
            },
            {
              week: "4",
              checked: false
            },
            {
              week: "5",
              checked: false
            },
            {
              week: "6",
              checked: false
            }
          ]
        }
      ];
    }
  },
  watch: {
    "goodsInfoForm.classifyCode": {
      handler () {
        let classifyCode = this.goodsInfoForm.classifyCode;
        if (classifyCode !== "") {
          this.subClassifyList = this.classifyTree.find(
            c => c.classifyCode === classifyCode
          ).children;
        }
      }
    },
    "goodsInfoForm.selectedCraftCode": {
      handler () {
        this.goodsCraftForm.craftList = [];
        this.addCraftRow(false);
      }
    },
    "goodsInfoForm.unit": {
      handler () {
        this.goodsCraftForm.craftList = [];
        this.addCraftRow(false);
      }
    },
    cityCodes: function () {
      this.goodsCityPriceForm.cityPriceList = [];
      let cityPrice = this.cityPriceAll;
      for (let i = 0; i < this.cityCodes.length; i++) {
        let cityCode = this.cityCodes[i];
        let { cityName } = this.cityList.find(c => c.cityCode === cityCode);
        let cityPrices = [];
        this.goodsCraftForm.craftList.forEach(c => {
          cityPrices.push({
            skuId: c.skuId,
            craftName: c.craftName,
            craftCode: c.craftCode,
            num: c.num,
            payMonthlyPrice: c.payMonthlyPrice,
            duration: c.duration,
            texture: c.texture,
            skuName: c.skuName,
            actualSellPrice: c.actualSellPrice,
            cityCode: cityCode,
            cityName: cityName,
            cityPrice: cityPrice !== "" ? cityPrice : "",
            isPutAway: true
          });
        });
        this.goodsCityPriceForm.cityPriceList = this.goodsCityPriceForm.cityPriceList.concat(
          cityPrices
        );
      }
    },
    cityAreas: function () {
      let cityAreas = this.cityAreas;
      let cityAreaPriceList = [];
      let cityAreaPriceAll = this.cityAreaPriceAll;
      this.goodsCityPriceForm.cityPriceList.forEach(c => {
        const { areas } = cityAreas.find(a => a.cityCode === c.cityCode);
        if (areas.length > 0) {
          areas.forEach(a => {
            let cityAreaPrice = { ...c, ...a };
            if (cityAreaPriceAll.length > 0) {
              let cityCode = cityAreaPrice.cityCode;
              let { cityAreaPrice: cap } = cityAreaPriceAll.find(
                c => c.cityCode === cityCode
              );
              cityAreaPrice.cityPrice = cap;
            }
            cityAreaPriceList.push(cityAreaPrice);
          });
        }
      });
      this.goodsCityAreaPriceForm.cityAreaPriceList = cityAreaPriceList;
    }
  },
  created () {
    this.getCraftTypeList();
    this.getServiceClassify();
    this.getUnitList();
    this.getSubServiceAreaList();
    this.getCityList();
    this.getSpecialGoodsList();
  }
};
</script>

<style scoped>
.my_steps {
  margin-top: 10px;
}

.el-tabs--left {
  margin-top: 30px;
}

.next_button {
  text-align: right;
}

.my_city_price_table {
  margin-top: 30px;
}

.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
.Specifications .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 125px;
}
.Specifications .el-form-item {
  margin-bottom: 0;
}
.el-tag--light {
  margin-left: 10px;
}
.checkWeekTable {
  border-top: none;
}
.checkWeekTable /deep/ .cell {
  font-size: 14px;
  font-weight: 500;
}
.checkWeekTable /deep/ .el-table__header {
  border-top: 1px solid #ebeef5;
}
.checkWeekTable::before {
  content: none;
}
.checkWeekTable::after {
  content: none;
}
.checkuserAppointmentDateDataRow {
  margin-bottom: 20px;
}
.checkuserAppointmentDateDataRow .el-form-item {
  margin-bottom: 10px;
}
.basicprice .el-form--inline .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.checkWeekTable.el-table /deep/ tbody tr:hover > td {
  background-color: #ffffff !important;
}
.checkWeekTable.el-table /deep/ tbody tr:hover {
  background-color: #ffffff !important;
}
.el-form-item-te /deep/ .el-form-item {
  display: block;
}
</style>
